<!-- 结决算管理-在综合查询中增加决算导出功能 -->
<template>
  <el-container class="electronicSignature">
    <el-header height="36px">
      <header-title :title="$route.meta.title" />
    </el-header>
    <el-main class="mainDetails">
      <div>
        <SearchPanel title="查询条件">
          <div ref="queryFormBox" class="search-flex-box">
            <MyForm
              ref="formRef"
              v-model="queryParams"
              :form-option="formOption"
              :select-list="dicLists"
              @handleEvent="handleEvent"
            >
              <template #orgIds>
                <div @click="activeUnit">
                  <el-input v-model="customCheck" class="construct" :readonly="true" placeholder="请选择">
                    <i slot="suffix" class="el-icon-more" />
                  </el-input>
                </div>
              </template>
            </MyForm>
            <div class="searchBtn">
              <el-button type="primary" class="pms-button-primary" @click="doSearch">查询</el-button>
            </div>
          </div>
        </SearchPanel>
        <SearchList title="查询结果" style="margin-top: 16px">
          <template #header-btn>
            <BtnConfig ref="btnConfigRef" :btn-configs="btnOption" @propClick="btnClick" />
          </template>
          <template #body>
            <MyTable
              id="id"
              ref="myTableRef"
              :table-data="tableData"
              :columns="colOption"
              :col-option-enum="dicLists"
              :is-selection="false"
            />
            <pagination
              v-if="pageParam.total > 10"
              :total="pageParam.total"
              :page.sync="pageParam.pageNum"
              :limit.sync="pageParam.pageSize"
              @pagination="doSearch"
            />
          </template>
        </SearchList>
        <!-- 选择建设单位 -->
        <el-dialog
          v-dialogDrag
          title="选择建设单位"
          width="30%"
          :append-to-body="true"
          :modal-append-to-body="true"
          :modal="true"
          :close-on-click-modal="false"
          :lock-scroll="true"
          class="pms-dialog"
          :visible.sync="dialogUnit"
        >
          <div class="dialogForm">
            <ChooseUnit ref="chooseUnitRef" v-model="queryParams.orgIds" />
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" class="pms-button-primary" size="small" @click="verifyUnit">确 定</el-button>
            <el-button type="primary" class="pms-button-primary" @click="dialogUnit = false">取 消</el-button>
          </div>
        </el-dialog>
      </div>
    </el-main>
    <!-- // 变更人 -->
    <alteration-page
      v-if="alterationPageVisible"
      ref="nextPage"
      :visible.sync="alterationPageVisible"
      :alteration-data="alterationData"
      @changeSave="changeSave"
    />
  </el-container>
</template>

<script>
    import HeaderTitle from '@/components/basic/HeaderTitle'
    import SearchPanel from '@/components/basic/SearchPanel'
    import MyForm from '@/components/basic/myForm'
    import SearchList from '@/components/basic/SearchList'
    import MyTable from '@/components/basic/myTable'
    import SysConst from '@/common/const'
    import BtnConfig from '@/components/basic/btnConfig.vue'
    import ChooseUnit from '@/views/attachManagement/electronicSign/eleSignVerConfig/chooseUnit.vue'
    import { getDropdownData } from '@/api/common' // 字典接口
    import { queryOrgApi } from '@/api/attachManagement/electronicSign/eleSignVerConfig'
    import { getListApi, updateTransactors } from '@/api/SettlementAndFinalAccounts/projectAuthorizationMigration/index' // 列表接口
    import alterationPage from '@/views/SettlementAndFinalAccounts/projectAuthorizationMigration/alterationPage'

    // 定义配置
    // 查询条件配置
    const formOption = {
        size: 'mini',
        inline: true,
        labelWidth: '160px',
        itemData: [
            {
                type: 'input',
                prop: 'prjName',
                value: '',
                width: '',
                colSpan: 6,
                clearable: true,
                label: '项目名称'
            },
            {
                type: 'input',
                prop: 'prjCode',
                value: '',
                width: '',
                colSpan: 6,
                clearable: true,
                label: '项目编码'
            },
            {
                type: 'mulSelect',
                prop: 'prjType',
                value: '',
                width: '',
                colSpan: 6,
                label: '项目类型',
                dicType: 'PROJ_TYPE',
                clearable: true,
                dicProp: {
                    label: 'dictName',
                    value: 'dictId'
                }
            },
            {
                type: 'select',
                prop: 'isPush',
                value: '',
                width: '',
                colSpan: 6,
                label: '结算单状态',
                dicType: 'JSD_SSZT',
                clearable: true,
                dicProp: {
                    label: 'dictName',
                    value: 'dictId'
                }
            },
            {
                type: 'select',
                prop: 'auditState',
                value: '',
                width: '',
                colSpan: 6,
                label: '结算审计状态',
                dicType: 'AUDIT_STATE',
                clearable: true,
                dicProp: {
                    label: 'dictName',
                    value: 'dictId'
                }
            },
            {
                type: 'select',
                prop: 'is3Pro',
                value: '',
                width: '',
                colSpan: 6,
                label: '是否3万以上项目',
                dicType: 'IS_3PRO',
                clearable: true,
                dicProp: {
                    label: 'dictName',
                    value: 'dictId'
                }
            },
            {
                type: 'slot',
                prop: 'orgIds',
                size: 'small',
                colSpan: 6,
                clearable: true,
                width: '',
                value: [],
                label: '建设单位'
            }
        ]
    }

    // 列表表头配置
    const colOption = [
        { label: '项目编码', width: '180', prop: 'PRJCODE' },
        { label: '项目名称', width: '370', prop: 'PRJNAME' },
        { label: '项目类型', width: '90', prop: 'PRJTYPE', dicType: 'PROJ_TYPE', dicProp: { label: 'dictName', value: 'dictId' }},
        { label: '建设方式', width: '80', prop: 'BUILDMODES', dicType: 'BUILD_MODES', dicProp: { label: 'dictName', value: 'dictId' }},
        { label: '是否3万以上项目', width: '150', prop: 'IS3PRO', dicType: 'IS_3PRO', dicProp: { label: 'dictName', value: 'dictId' }},
        { label: '结算单状态', width: '100', prop: 'ISPUSH', dicType: 'JSD_SSZT', dicProp: { label: 'dictName', value: 'dictId' }},
        { label: '结算审计状态', width: '100', prop: 'AUDITSTATE', dicType: 'AUDIT_STATE', dicProp: { label: 'dictName', value: 'dictId' }},
        { label: '当前办理环节', width: '100', prop: 'TASKNAME' },
        { label: '当前办理人', width: '', prop: 'TASKPERSON' }
    ]

    // 列表按钮配置
    const btnOption = [
        { label: '办理人授权', fun: 'AgentsAuthorization', type: '' }
    ]

    export default {
        name: 'ElectronicSignature',
        components: {
            HeaderTitle,
            SearchPanel,
            SearchList,
            MyTable,
            MyForm,
            ChooseUnit,
            alterationPage,
            BtnConfig
        },
        data() {
            return {
                queryParams: {
                    'prjCode': '',
                    'prjName': '',
                    'prjType': '',
                    'isPush': '',
                    'auditState': '',
                    'is3Pro': '',
                    'orgIds': []
                }, // 查询数据
                formOption, // 查询条件配置项
                customCheck: '', // 查询条件建设单位选择后显示
                dialogUnit: false, // 建设单位弹框
                tableData: [], // 列表数据
                colOption, // 列表表头
                btnOption, // 列表按钮
                // fixedCheckOption: colOption, // 固定字段
                // customCheckOption, // 自定义字段
                // dialogCheckbox: false, // 自定义列表弹框
                dicLists: {}, // 下拉框字典选项集合
                multipleChoice: {}, // 复选框单选,选中的值
                // 分页信息
                pageParam: {
                    pageSize: SysConst.PAGESIZE, // 每页显示val条
                    pageNum: SysConst.CURRENT_PAGE, // 当前页
                    total: SysConst.TOTAL // 总数
                },
                alterationPageVisible: false, // 变更页面
                alterationData: {}
            }
        },
        created() {
            this.getDictData()
            this.queryOrg()
            this.doSearch()
        },
        methods: {
            // 查看数据
            doSearch(item) {
                const params = {
                    pageNum: item?.page || SysConst.CURRENT_PAGE,
                    pageSize: item?.limit || SysConst.PAGESIZE,
                    param: {
                      ...this.queryParams
                    }
                }
                console.log(params, 'param')
                getListApi(params).then(res => {
                    if (+res.code !== 200) {
                      return Promise.reject(res)
                    }
                    this.tableData = res.data?.list
                    this.pageParam.total = res.data?.total || 0
                    this.pageParam.pageSize = item?.pageSize || SysConst.PAGESIZE
                    this.pageParam.pageNum = item?.pageNum || SysConst.CURRENT_PAGE
                })
            },
            // 查询条件事件
            handleEvent(prop, val) {
                console.log(prop, val, 'hjhjbj')
            },
            // 列表按钮点击事件
            btnClick(fun, row) {
                this[fun](row)
            },
            // 办理人授权
            async AgentsAuthorization(row) {
              this.multipleChoice = row
              if (row.length !== 1) {
                return this.$message.info('当前仅支持单条数据操作')
              }
              console.log(row)
              this.alterationPageVisible = true
              this.alterationData = row
            },
            // 选择建设单位
            activeUnit() {
                this.dialogUnit = true
            },
            // 确定单位
            verifyUnit() {
                const { checkedKeys, checkedNodes } = this.$refs.chooseUnitRef
                this.$set(this.queryParams, 'orgIds', checkedKeys)
                const list = checkedNodes.map((item) => item.orgName)
                this.customCheck = list.join().replaceAll(',', '、')
                this.dialogUnit = false
            },
            // 获取下拉框数据
            async getDictData() {
                const arr = ['JSD_SSZT', 'PROJ_TYPE', 'AUDIT_STATE', 'IS_3PRO', 'BUILD_MODES']
                const promises = arr.map(item => getDropdownData(item))
                const results = await Promise.all(promises)
                arr.forEach((item, i) => {
                    this.$set(this.dicLists, item, results[i].data ?? [])
                })
                this.$set(this.dicLists, 'FILE_UPLOAD_MODES', SysConst.UPLOAD_MODES)
            },
            // 查询建设单位
            async queryOrg() {
                const res = await queryOrgApi()
                this.$set(this.dicLists, 'BUILD_UNIT', res.data)
            },
            // 保存
            changeSave(vale) {
              const params = {
                    fieldProjectManager: this.multipleChoice[0].GOTOSHMANAGER, // GOTOSHMANAGER
                    toUserId: vale.empId, // 新选择的人
                    isPush: this.multipleChoice[0].ISPUSH, // isPush
                    prjId: this.multipleChoice[0].PRJID, // PRJID
                    prjCode: this.multipleChoice[0].PRJCODE, // prjCode
                    projectName: this.multipleChoice[0].PRJNAME // 这个知道
                }
                updateTransactors(params).then(res => {
                    if (+res.code !== 200) {
                      return Promise.reject(res)
                    }
                    this.$message.success('变更人员成功')
                })
              console.log(vale, '保存啊')
            }
        }
    }
</script>

<style lang="scss" scoped>
.search-flex-box {
    // display: flex;
    // justify-content: space-between;
    height: auto;
}
.searchBtn {
    width: 100px;
    margin-left: auto;
    display: flex;
    margin-top: 4px;
    flex-direction: column;
    .el-button + .el-button {
        margin-left: 0;
        margin-top: 8px;
    }
}

.electronicSignature {
    width: 100%;
    .mainDetails {
        padding: 20px 25px 0px;
    }
    .topRemark {
        // background-color: #fdf5e6;
        background-color: #ffefd5;
        width: 100%;
        height: 40px;
        line-height: 40px;
        padding-left: 10px;
        font-size: 14px;

        .asterisk {
            color: #f00;
            margin-right: 2px;
            font-size: 18px;
        }
    }

    .customBtn {
        height: 20px;
        line-height: 20px;
        font-size: 14px;
        margin: 10px 20px 10px 90%;
        cursor: pointer;

        .el-icon-s-tools {
            font-size: 20px;
            color: #999;
            margin-right: 6px;
        }
    }
}

.el-button--text {
    color: #02A7F0;
}

.el-button--primary {
    color: #fff;
}
.dialog-footer {
    display: flex;
    justify-content: center;
}
::v-deep .el-button + .el-button {
    color: #fff;
}
// 弹框样式
::v-deep .el-dialog__body {
    max-height: 400px;
    overflow-y: auto;
}
// 滚动条样式
::v-deep .el-dialog__body::-webkit-scrollbar {
// 滚动条整体样式
width: 6px; //高宽分别对应横竖滚动条的尺寸
height: 10px;
}
::v-deep .el-dialog__body::-webkit-scrollbar-thumb {
// 滚动条里面小方块
border-radius: 10px;
// -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
background: #f2f3f5;
}
::v-deep .el-range-editor.el-input__inner {
    padding: 0px 10px;
}

</style>

